<script lang='ts' setup>
import { reactive, ref, Ref } from 'vue';
import JxudpDataSourceServiceApi from '/@/api/org/bean/jxudp-data-source'
import { ModelFormExpose } from '/@/components/platform/form/model-form/interface';
const emit = defineEmits<{
    (e: 'add-success', data: any, res: any): void//保存成功回调
    (e: 'update-success', data: any, res: any): void//更新成功回调
}>()

const props = defineProps({
    /**主键值 */
    dataSourceId: String,
})

const JxtechModelFormRef = ref();


const JxudpDataSourceFormData: Ref<any> = ref({
    dataSourceId: props.dataSourceId
})

const rules = {
    dataSourceId: [{ required: true, message: '请输入数据源名称', trigger: 'blur' }],
    dataSourceDesc: [{ required: true, message: '请输入数据源描述', trigger: 'blur' }],
    driverClass: [{ required: true, message: '请选择JDBC驱动', trigger: 'change' }],
    connUrl: [{ required: true, message: '请输入连接字符串', trigger: 'blur' }],
    userName: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
    password: [{ required: true, message: '请输入用户密码', trigger: 'blur' }],
    minPoolSize: [{ required: true, message: '请输入连接池最小数量', trigger: 'blur' }],
    maxPoolSize: [{ required: true, message: '请输入连接池最大数量', trigger: 'blur' }],
    initialPoolSize: [{ required: true, message: '请输入连接池初始化数量', trigger: 'blur' }],
    dbCharSet: [{ required: true, message: '请输入数据库字符集', trigger: 'blur' }],
    jndiName: [{ required: true, message: '请输入JNDI名称', trigger: 'blur' }]
}
const JxudpDataSourceFormState = reactive({
    primaryKey: 'dataSourceId',
    getJxtechModelFormExpose: (): ModelFormExpose => {
        return JxtechModelFormRef.value as ModelFormExpose
    },
    /**新增成功 */
    onAddSuccess: (formData: any, res: any) => {
        emit("add-success", formData, res)
    },
    // 切换JDBC驱动
    handleJdbcChange: (val: any) => {
        let connUrl = ''
        switch (val) {
            case 'oracle':
                connUrl = 'jdbc:oracle:thin:@ip:1521:db'
                break;
            case 'mysql':
                connUrl = 'jdbc:mysql://ip:3306/db?useUnicode=true&amp;characterEncoding=UTF-8'
                break;
            case 'postgresql':
                connUrl = 'jdbc:postgresql://ip:5432/db'
                break;
            case 'phoenix':
                connUrl = ''
                break;
            case 'sqlserver':
                connUrl = 'jdbc:sqlserver://ip:1433;DatabaseName=db'
                break;
            default:
                break;
        }
        JxudpDataSourceFormData.value.connUrl = connUrl

    }
})

defineExpose({
    save: () => JxudpDataSourceFormState.getJxtechModelFormExpose().save()
})
</script>
<template>
    <jxtech-model-form
        ref="JxtechModelFormRef"
        :service-api="JxudpDataSourceServiceApi"
        :primary-key="JxudpDataSourceFormState.primaryKey"
        :form-data="JxudpDataSourceFormData"
        :rules="rules"
        @add-success="JxudpDataSourceFormState.onAddSuccess"
    >
        <el-row>
            <el-col :span="24">
                <el-card  class="mb10">
                    <template #header>
                        <div class="jxtech-card-title">
                            <span>主要配置</span>
                        </div>
                    </template>
                    <el-row :gutter="24">
                        <el-col :span="12">
                            <jxtech-model-form-item label="数据源名称" prop="dataSourceId">
                                <el-input
                                    placeholder="请输入数据源名称"
                                    v-model="JxudpDataSourceFormData.dataSourceId"
                                ></el-input>
                            </jxtech-model-form-item>
                        </el-col>
                        <el-col :span="12">
                            <jxtech-model-form-item label="数据源描述" prop="dataSourceDesc">
                                <el-input
                                    placeholder="请输入数据源描述"
                                    v-model="JxudpDataSourceFormData.dataSourceDesc"
                                ></el-input>
                            </jxtech-model-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="24">
                            <jxtech-model-form-item label="是否为JNDI" prop="jndi">
                                <el-switch
                                    v-model="JxudpDataSourceFormData.jndi"
                                    inline-prompt
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    active-text="是"
                                    inactive-text="否"
                                />
                            </jxtech-model-form-item>
                        </el-col>
                    </el-row>
                </el-card>
                <el-card  class="mb10" v-if="JxudpDataSourceFormData.jndi">
                    <template #header>
                        <div class="jxtech-card-title">
                            <span>JDNI数据库配置</span>
                        </div>
                    </template>
                    <el-row :gutter="24">
                        <el-col :span="24">
                            <jxtech-model-form-item label="JNDI名称" prop="jndiName">
                                <el-input
                                    placeholder="请输入JNDI名称"
                                    v-model="JxudpDataSourceFormData.jndiName"
                                ></el-input>
                            </jxtech-model-form-item>
                        </el-col>
                    </el-row>
                </el-card>
                <el-card  class="mb10" v-if="!JxudpDataSourceFormData.jndi">
                    <template #header>
                        <div class="jxtech-card-title">
                            <span>C3P0数据库配置</span>
                        </div>
                    </template>
                    <el-row :gutter="24">
                        <el-col :span="12">
                            <jxtech-model-form-item label="JDBC驱动" prop="driverClass">
                                <jxtech-dictionary-select
                                    placeholder="请选择JDBC驱动"
                                    codeItemId="DRIVER_CLASS"
                                    v-model="JxudpDataSourceFormData.driverClass"
                                    @change="JxudpDataSourceFormState.handleJdbcChange"
                                ></jxtech-dictionary-select>
                            </jxtech-model-form-item>
                        </el-col>
                        <el-col :span="12">
                            <jxtech-model-form-item label="连接字符串" prop="connUrl">
                                <el-input
                                    placeholder="请输入连接字符串"
                                    v-model="JxudpDataSourceFormData.connUrl"
                                ></el-input>
                            </jxtech-model-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="12">
                            <jxtech-model-form-item label="用户名称" prop="userName">
                                <el-input
                                    placeholder="请输入用户名称"
                                    v-model="JxudpDataSourceFormData.userName"
                                ></el-input>
                            </jxtech-model-form-item>
                        </el-col>
                        <el-col :span="12">
                            <jxtech-model-form-item label="用户密码" prop="password">
                                <el-input
                                    placeholder="请输入用户密码"
                                    v-model="JxudpDataSourceFormData.password"
                                ></el-input>
                            </jxtech-model-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="12">
                            <jxtech-model-form-item label="连接池最小数量" prop="minPoolSize">
                                <el-input
                                    placeholder="请输入连接池最小数量"
                                    v-model="JxudpDataSourceFormData.minPoolSize"
                                ></el-input>
                            </jxtech-model-form-item>
                        </el-col>
                        <el-col :span="12">
                            <jxtech-model-form-item label="连接池最大数量" prop="maxPoolSize">
                                <el-input
                                    placeholder="请输入连接池最大数量"
                                    v-model="JxudpDataSourceFormData.maxPoolSize"
                                ></el-input>
                            </jxtech-model-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="24">
                            <jxtech-model-form-item label="连接池初始化数量" prop="initialPoolSize">
                                <el-input
                                    placeholder="请输入连接池初始化数量"
                                    v-model="JxudpDataSourceFormData.initialPoolSize"
                                ></el-input>
                            </jxtech-model-form-item>
                        </el-col>
                    </el-row>
                </el-card>
                <el-card  class="mb10">
                    <template #header>
                        <div class="jxtech-card-title">
                            <span>扩展配置</span>
                        </div>
                    </template>
                    <el-row :gutter="24">
                        <el-col :span="12">
                            <jxtech-model-form-item label="数据库字符集" prop="dbCharSet">
                                <jxtech-dictionary-select
                                    placeholder="请选择数据库字符集"
                                    codeItemId="DB_CHAR_SET"
                                    v-model="JxudpDataSourceFormData.dbCharSet"
                                ></jxtech-dictionary-select>
                            </jxtech-model-form-item>
                        </el-col>
                        <el-col :span="12">
                            <jxtech-model-form-item label="数据库SCHEMA" prop="dbShecma">
                                <el-input
                                    placeholder="请输入数据库SCHEMA"
                                    v-model="JxudpDataSourceFormData.dbShecma"
                                />
                            </jxtech-model-form-item>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
    </jxtech-model-form>
</template>